<template>
  <div>
    <span v-for="(item, idx) in data" :key="idx">
      <!-- <input type="checkbox" :id="item.label" :checked="item.checked" @change="onChange(item)"> -->
      <input type="checkbox" :id="item.label" v-model="item.checked">
      <label :for="item.label">{{ item.label }}</label>
    </span>
    <ul>
      <li v-for="(item, idx) in data.filter(d => d.checked)" :key="idx">
        {{ item.label }}
      </li>
    </ul>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data () {
    return {
      data: ['科幻', '游戏', 'vue', '房云川', '前端'].map(item => ({ label: item, checked: true })),
    };
  },
  // methods: {
  //   onChange (item) {
  //     item.checked = !item.checked;
  //   },
  // },
}
</script>